<template>
  <div class="drawer-box">
    <el-drawer v-model="isShow" close-on-click-modal size="60%" :before-close="handleClose" :destroy-on-close="true">
      <template #header>
        <h4 class="drawer-name">车辆信息详情{{ ruleForm.companyName }}</h4>
      </template>
      <template #default>
        <div>
          <div class="title-name mb20">车辆基本信息</div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="车辆图片" label-class-name="my-label" class-name="my-content">
              <image-preview :src="ruleForm.vehiclePicUrl" :width="100" :height="100" />
            </el-descriptions-item>
            <el-descriptions-item label="车牌号" label-class-name="my-label" class-name="my-content"
              >{{ ruleForm.licensePlate }}
            </el-descriptions-item>
            <el-descriptions-item label="车型" label-class-name="my-label" class-name="my-content">{{ ruleForm.modelName }} </el-descriptions-item>
            <el-descriptions-item label="车辆品牌" label-class-name="my-label" class-name="my-content">{{ ruleForm.brand }} </el-descriptions-item>
            <el-descriptions-item label="车身颜色" label-class-name="my-label" class-name="my-content">{{ ruleForm.color }} </el-descriptions-item>
            <el-descriptions-item label="购置日期" label-class-name="my-label" class-name="my-content"
              >{{ ruleForm.purchaseDate }}
            </el-descriptions-item>
            <el-descriptions-item label="使用性质" label-class-name="my-label" class-name="my-content"
              >{{ ruleForm.usageNatureName }}
            </el-descriptions-item>
            <el-descriptions-item label="座位数" label-class-name="my-label" class-name="my-content">{{ ruleForm.seatNum }} </el-descriptions-item>
            <el-descriptions-item label="排量" label-class-name="my-label" class-name="my-content"
              >{{ ruleForm.displacementName }}
            </el-descriptions-item>
            <el-descriptions-item label="备注信息" label-class-name="my-label" class-name="my-content">{{ ruleForm.remarks }} </el-descriptions-item>
          </el-descriptions>
          <div class="title-name mb20 mt20">车辆保险信息</div>
          <el-table :data="ruleForm.insuranceInfo" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="70" />
            <el-table-column prop="insuredDate" label="投保日期" width="150" />
            <el-table-column prop="insuranceCompany" label="保险公司" />
            <el-table-column prop="insuranceType" label="险种" />
            <el-table-column label="保险期限" width="280" prop="insuranceDate">
              <template #default="scope"> {{ scope.row.insuranceBeginDate }} 至 {{ scope.row.insuranceEndDate }} </template>
            </el-table-column>
            <el-table-column prop="premium" label="保费(元)" />
          </el-table>
          <div class="title-name mb20 mt20">车辆维修记录</div>
          <el-table :data="ruleForm.repairRecord" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="70" />
            <el-table-column prop="repairDate" label="维修日期" width="150" />
            <el-table-column prop="manufacturer" label="厂家" />
            <el-table-column prop="repairItem" label="项目" />
            <el-table-column prop="cost" label="费用(元)" width="150" />
          </el-table>
          <div class="title-name mb20 mt20">车辆年检记录</div>
          <el-table :data="ruleForm.annualInspectionRecord" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="70" />
            <el-table-column prop="inspectionDate" label="年检日期" width="150" />
            <el-table-column prop="inspectionResult" label="结果" />
            <el-table-column label="有效期" prop="insuranceDate" width="280">
              <template #default="scope"> {{ scope.row.validityBeginDate }} 至 {{ scope.row.validityEndDate }} </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { getVehicleBasicInfo } from '@/api/vehicle/vehicleBasicInfo/index';
import { ref, defineEmits, defineExpose } from 'vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { yhsf } = toRefs<any>(proxy?.useDict('yhsf'));
const ruleForm = ref<any>({});
let isShow = ref(false);
const isOpen = async (id) => {
  const res = await getVehicleBasicInfo(id);
  ruleForm.value = res.data;
  isShow.value = true;
};
const isClose = () => {
  isShow.value = false;
  ruleForm.value = {};
};
/*
vue3中规定，使用了 <script setup> 的组件是默认私有的：
一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，
除非子组件在其中通过 defineExpose 宏显式暴露
*/
defineExpose({
  isOpen,
  isClose
});
const handleClose = (done: () => void) => {
  isClose();
};
</script>
<style scoped>
:deep(.my-label) {
  color: #000;
  text-align: center;
  font-weight: 600 !important;
  height: 40px;
  background-color: #d6dbe1;
  width: 17% !important;
  word-break: keep-all;
}

:deep(.my-content) {
  width: 33% !important;
}
</style>
<style lang="scss" scoped>
.drawer-box {
  :deep(.el-drawer__header) {
    height: 70px;
    margin-bottom: 0px;
    color: #000;
  }
}

.drawer-name {
  font-weight: bold;
  font-size: 18px;
}
</style>
